<template>
	<view class="poup-from-bottom">
		<u-popup mode="bottom" :closeable="true" :round="10" :show="showDetails" @close="onClosePoup">
			<view class="ticket-details">
				<view class="poup-title u-p-25 u-margin-right-50">
					<view class="color-main u-line-2 u-margin-bottom-20">
						 <text class="font-size22 font-weight">{{title}}</text>				 
					</view>					 
				</view>			
			<view class="line-border u-margin-top-15"> </view>
			
			<view class="ticket-details-content u-p-25">
			
			<scroll-view
			 	:scroll-y="true"
				:scroll-x="false" 
			 	scroll-with-animation
			 	class="ticket-details-content_scroll"
			 	:show-scrollbar="true" 
			 >	 
				<slot name="default"> </slot> 
			 
			 </scroll-view>
			
			</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	const emits = defineEmits(['update:showDetails'])
	const props = defineProps({
		title : {
			type: String,
			default: '标题信息'
		},
		showDetails :{
			type:Boolean,
			default:false,
		}
	})
	function onClosePoup()
	{
		emits('update:showDetails', false)
	}
</script>

<style lang="scss">
	.ticket-details{
		height: calc(100vh - 100px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		&-content{
			flex: 1; 
			height: 90%;
			
		}
		
		.ticket-details-content_scroll{
			height: 100%;
		}
	}
	.group-title{
		display: flex;
		align-items: center;
		margin-bottom:.9rem;
		margin-top: .9rem;
	}
	.vertical-line{
	  content: '';
	  display: inline-block;
	  height: 15px;
	  width: 4px;
	  background-color: $u-primary;
	  margin-right: 8px;
	  border-radius: 4px;
	}
	.u-content {	      
	       font-size: 32rpx;
	       color: $u-content-color;
	       line-height: 1.6;
		   background-color: #fff;
		  padding-bottom: 40px !important;
	   }
</style>